<template>
  <div id="details">
    <van-nav-bar
    title="收货地址"
    left-text="返回"
    right-text="..."
    left-arrow
    @click-left="onClickLeft"
    />
    <div class="info">
         <div class="man">
            <h3>联系人</h3>
            <!-- <span>{{$route.query.item.name}}</span> -->
            <input type="text" :value='$route.query.item.name' ref="name1">
        </div>
        <div class="phone">
            <h3>电话</h3>
            <!-- <span>{{$route.query.item.phone}}</span> -->
            <input type="text" :value='$route.query.item.phone' ref="phone1">
        </div>
        <div class="address">
            <h3>地址</h3>
            <!-- <span>{{$route.query.item.address}}</span> -->
            <input type="text" :value='$route.query.item.address' ref="address">
        </div>
    </div>
    <div class="button">
        <button @click="delclick">删除</button>
        <button @click="editclick">确认</button>
    </div>
   

  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    delclick(){
        this.request_unaddress(this.$route.query.item)
        this.$router.go(-1);
    },
    editclick(){
        this.request_edit_address({name:this.$refs.name1.value,phone:this.$refs.phone1.value,address:this.$refs.address.value,addressid:this.$route.query.item.id});
        this.$router.go(-1);
    },
    ...mapActions('address',['request_unaddress','request_edit_address'])
  },
  computed:{
        ...mapState('address',['addresslist'])
    },
};
</script>

<style>
.info h3{
    float: left;
    line-height: 40px;
    margin-left: 10px;
}
.info input{
    display: inline-block;
    position: absolute;
    left: 30%;
    line-height: 40px;
    border: 0px;
    outline: none;
}
.info div{
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #eaeaea;
}
.info {
    margin-bottom: 10px;
}
.button{
    display: flex;
    justify-content: space-around;
}
.button button{
    height: 40px;
    width: 45%;
    border: none;
}
.button button:nth-child(1){
    background: red;
}
.button button:nth-child(2){
    background: skyblue;
}
</style>